<template>
  <el-table
    size="large"
    :data="list"
    height="250"
    border
    style="width: 100%">
    <!-- 第一行  用来显示索引 -->
    <el-table-column width="30px" type="index"></el-table-column>
    <!-- 根据规格生成表格页 -->
    <el-table-column
     align="center"
     v-for="(item,index) in listProp"
     :key="index"
     :prop="item.prop"
     :label="item.label"
     :width="columnWidth(item.label)"
     class-name="item.label==='标签' ? tagColumn :"
     >
     <!-- 处理标签 -->
     <template v-if="item.label==='标签'" v-slot="{row}">
      <el-tag v-for="(item,index) in row.tag" :key="index" effect="dark" class="artTag">{{item}}</el-tag>
     </template>
     <!-- 提取时间数据 进行格式化 -->
      <template v-else-if="item.label==='日期'" v-slot="{row}">
        {{$dayjs(row.createDate).format('YYYY-MM-DD')}}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="130" align="center" v-slot="{row}">
        <el-button v-if="isShowRead" @click="$emit('goArt',row)" type="primary" icon="el-icon-view" circle></el-button>
        <el-button v-else @click="sendClickMsg('edit',row)" type="primary" icon="el-icon-edit" circle></el-button>
        <el-button @click="sendClickMsg('delete',row)" type="danger" icon="el-icon-delete" circle></el-button>
    </el-table-column>

  </el-table>
</template>

<script>
  export default {
    props:['list','listProp','isShowRead'],
    methods:{
      sendClickMsg(type,row){
        this.$emit('btnClick',type,row)
      },
       columnWidth(label){
        let width = ''
        switch (label) {
          case '标题':
            width = 260
            break;
          case '标签':
            width=200
            break
        }
        return width
      }
    }
  }
</script>
<style lang="less">
.el-table__row{
  height: 60px !important;
}
.el-table{
  min-height: 288px !important;
}

</style>

<style lang="less" scoped>
.artTag{
margin-left: 3px;
}
</style>